<template>
<!-- 图标， 服务名， 服务价格， 服务代号， 服务描述， 备注， -->
    <el-dialog title="服务表单" :visible.sync="form_show">
      <el-form :model="form_data">
        <el-form-item label="服务名称" :label-width="formLabelWidth">
          <el-input v-model="form_data.servicename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="服务代号" :label-width="formLabelWidth">
          <el-input v-model="form_data.sno" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="服务价格" :label-width="formLabelWidth">
          <el-input v-model="form_data.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="服务描述" :label-width="formLabelWidth">
          <el-input v-model="form_data.memo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-upload
        class="upload-demo"
        :headers ="headers"
        action="/his/upload/service_imgs"
        :on-success="uploadSuccess"  
        :file-list="form_data.imgs">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="form_show = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
</template>

<script>
import {myPostBody} from '../utils/api'
export default {
  props: ['form_show'],
  data(){
    return {
      headers: {
        token: window.localStorage.getItem("token")
      },
      form_data: {
        servicename: '服务名', 
        sno: '服务代号', 
        price: 30, 
        memo: '服务描述',
        avatar: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        imgs: []
      },
      fileList: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }],
      formLabelWidth: '120px'
    }
  }, 
  methods:{
    uploadSuccess(response, file, fileList){
      this.form_data.imgs.push(response)
    },
    submit(){
      myPostBody('/services', this.form_data).then(res=>{
          console.debug(res);
          this.$message({showClose: true, message: '插入成功', type: 'success'})
          this.$router.go(0)
        }).catch(err=>{this.$message({showClose: true, message: '插入失败', type: 'error'})})
      this.form_show = false
    },
  },
  watch: {
    form_show(new_v, old_v){
      
      console.debug(old_v+"表单form_show发生变化"+new_v)
      this.$emit('form_show_change', new_v)
    } 
  }
}
</script>

<style>

</style>


<style scoped> 
  
</style>